{{extend 'layout.html'}}

<script>
    // Set correct menu view.
    $('#menu-statistics').addClass('active');
    $('#menu-protocols-statistics').addClass('active');
</script>

<h3 class="title1">Protocols Statistics</h3>

{{if not session.logged:}}
<div class="alert alert-danger" role="alert">
   <strong>Error: </strong>You must be logged to view this page!
</div>
{{else:}}

{{if ('alert_type' in globals()) and alert_type != "":}}
<div class="alert alert-{{=alert_type}}" role="alert">
    <strong>
        {{if alert_type == "danger":}}Error:
        {{elif alert_type == "success":}}Success:
        {{elif alert_type == "info":}}Info:
        {{elif alert_type == "warning":}}Warning:
        {{pass}}
    </strong>{{=alert_message}}
</div>
{{pass}}

<!-- Time Range Form -->
<div class="forms inline-form widget-shadow">
    <div class="form-title">
	    <h4>Options</h4>
    </div>
    <div class="form-body">
        <div data-example-id="simple-form-inline">
            <form class="form-inline">
                <div class="form-group">
                    <label for="interval">Interval:</label>
                    <select name="interval" id="interval" class="form-control" placeholder="interval" onchange="setInterval(this.value)">
                        <option value="2" selected>Last 2 hours</option>
                        <option value="6">Last 6 hours</option>
                        <option value="12">Last 12 hours</option>
                        <option value="24">Last 24 hours</option>
                        <option value="48">Last 2 days</option>
                        <option value="custom">Custom</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="datetime-beginning">From:</label>
                    <input type="text" name="beginning" id="datetime-beginning" class="datetimepicker form-control">
                </div>
                <div class="form-group">
                    <label for="datetime-end">To:</label>
                    <input type="text" name="end" id="datetime-end" class="datetimepicker form-control">
                </div>
                <div class="form-group">
                    <label for="aggregation">Aggregation:</label>
                    <select name="aggregation" id="aggregation" class="form-control" placeholder="aggregation">
                        <option value="10s" selected>10 seconds</option>
                        <option value="30s">30 seconds</option>
                        <option value="1m">1 minute</option>
                        <option value="5m">5 minutes</option>
                    </select>
                </div>
                <button type="button" class="btn btn-default" onclick="loadAllCharts();false;">Set options</button>
            </form>
        </div>
	</div>
</div>
<!-- //Time Range Form -->

<!-- Statistics Chart -->
<div class="panel-info widget-shadow general chart-protocols-statistics">
    <h4 class="title2">Statistics Charts</h4>

    <ul id="chart-type-selector" class="nav nav-tabs" role="tablist">
		<li role="presentation" class="active">
			<a href="#chart-flows-panel" id="chart-flows-tab" role="tab" data-toggle="tab" aria-controls="chart-flows-panel" aria-expanded="true">Flows</a>
		</li>
        <li role="presentation" class="">
			<a href="#chart-packets-panel" id="chart-packets-tab" role="tab" data-toggle="tab" aria-controls="chart-packets-panel" aria-expanded="false">Packets</a>
		</li>
        <li role="presentation" class="">
			<a href="#chart-bytes-panel" id="chart-bytes-tab" role="tab" data-toggle="tab" aria-controls="chart-bytes-panel" aria-expanded="false">Bytes</a>
		</li>
	</ul>

    <div id="chart-panels" class="tab-content scrollbar1" style="min-height: 540px;">
        <!-- Flows -->
		<div role="tabpanel" class="tab-pane fade active in" id="chart-flows-panel" aria-labelledby="chart-flows-tab">
            <!-- Status -->
            <div class="chart-status" id="chart-flows-status"></div>
            <!-- Main Chart -->
            <div id="chart-flows" class="zingchart"></div>
        </div>
        <!-- Packets -->
        <div role="tabpanel" class="tab-pane fade" id="chart-packets-panel" aria-labelledby="chart-packets-tab">
            <!-- Status -->
            <div class="chart-status" id="chart-packets-status"></div>
            <!-- Main Chart -->
            <div id="chart-packets" class="zingchart"></div>
        </div>
        <!-- Bytes -->
        <div role="tabpanel" class="tab-pane fade" id="chart-bytes-panel" aria-labelledby="chart-bytes-tab">
            <!-- Status -->
            <div class="chart-status" id="chart-bytes-status"></div>
            <!-- Main Chart -->
            <div id="chart-bytes" class="zingchart"></div>
        </div>
    </div>

    <div class="clearfix"> </div>
</div>

<style>
/* Hack to see the whole watermark */
#chart-flows-license-text, #chart-packets-license-text, #chart-bytes-license-text {
    margin-left: -20px !important;
}
</style>
<!-- //Statistics Chart -->


<!-- Load Custom Scripts -->
<script src="{{=URL('static','js/custom/datetime_interval.js')}}"></script>
<script src="{{=URL('static','js/custom/protocols_statistics.js')}}"></script>
<!-- //Load Custom Scripts -->

{{pass}}